import { Meta, Story, Canvas } from '@storybook/addon-docs';

<Meta
  title="Foundations/Backgrounds"
/>

# Backgrounds

<Canvas>
  <div class="storybook-backgrounds">
    <div class="bg--secondary-900">
      <div class="text--negative">
        bg--secondary-900
      </div>
    </div>
    <div class="bg--secondary-800">
      <div class="text--negative">
        bg--secondary-800
      </div>
    </div>
    <div class="bg--secondary-700">
      <div class="text--negative">
        bg--secondary-700
      </div>
    </div>
    <div class="bg--secondary-600">
      <div class="text--negative">
        bg--secondary-600
      </div>
    </div>
    <div class="bg--secondary-500">
      <div class="text--negative">
        bg--secondary-500
      </div>
    </div>
    <div class="bg--secondary-400">
      <div class="text--negative">
        bg--secondary-400
      </div>
    </div>
    <div class="bg--secondary-300">
      bg--secondary-300
    </div>
    <div class="bg--secondary-200">
      bg--secondary-200
    </div>
    <div class="bg--secondary-100">
      bg--secondary-100
    </div>
    <div class="bg--secondary-50">
      bg--secondary-50
    </div>
    <div class="bg--white">
      bg--white
    </div>
  </div>
</Canvas>

